<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
   


    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
      
        <a-form-model-item
        v-show="model.type!=0"
        label="上级"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :validate-status="validateStatus"
        :hasFeedback="true"
        :required="true">
        <span slot="help">{{ validateStatus=='error'?'请选择上级':'&nbsp;&nbsp;' }}</span>
        <a-tree-select
          style="width:100%"
          :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
          :treeData="treeData"

           v-model="dataInfo.parentId"
          placeholder="请选择上级"
          :disabled="disableSubmit"
          @change="handleParentIdChange">
        </a-tree-select>
    </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :label="menuLabel"
          prop="title"
          hasFeedback >
          <a-input placeholder="请输入名称" v-model="model.title" :readOnly="disableSubmit"/>
        </a-form-model-item>
        </a-form-model>

      </a-spin>
    </j-modal>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
//  import  {queryCategoryTreeList} from '@/api/api'
export default {
  name: 'WtCategoryForm',
  components: {
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    departTree:{
      type:Object
    },
    dataInfo: {
      type: Object,
      default: ()=> {
        return {}
      }
    }
  },
  data () {
    return {
        visible: false,
      model:{
        title:''
       },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
      },
      id:'',
      parentId:'',
      type:'',
      validateStatus:"",
      menuLabel:'名称',
      disableSubmit:false,
      treeData:[],
      url: {
        list:"/system/sysOrgFile/list",
       
        edit: "/system/sysOrgFile/edit",
       
      },

    }
  },
  computed: {
    formDisabled(){
      return this.disabled
    },
    validatorRules:function() {
      return {
        name:[{ required: true, message: '请输入名称!' }],

      }
    }
  },
  created () {
     //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    
  },
  mounted() {
    this.model.parentId=this.dataInfo.parentId
   
  },
  methods: {
    loadTree(){
      var that = this;
      
      getAction('/system/sysOrgFile/list').then((res)=>{
        // console.log(res.result);
        if(res.success){
          // console.log(res)
          that.treeData = [];
          let treeList = res.result
          for(let a=0;a<treeList.length;a++){
            let temp = treeList[a];
            temp.isLeaf = temp.leaf;
            that.treeData.push(temp);
          }

          // console.log(that.treeData);
        }
      });
    },
    add () {
    
    },
    edit (depart) {
      // depart=this.departTree
      // this.model = Object.assign({}, depart);
    this.model.title = this.dataInfo.title
      this.visible = true;
      this.loadTree();
    },
    onChangetype(e) {
      // console.log('onChangetype：', value);
      if(this.model.type == 1  ){
        this.show = true;
        this.menuLabel = '名称';

      }
      this.$nextTick(() => {
        this.$refs.form.validateField(['url','component']);
      });
    },
    handleOk () {
      // 触发表单验证
      // console.log('接收：', this.dataInfo)
      this.visible = true
    // this.confirmLoading = false
    this.parentId=this.dataInfo.parentId
    this.id=this.dataInfo.id
   
    this.type=this.dataInfo.type
    // console.log('gds',this.dataInfo);
    // debugger
    httpAction(
      '/system/sysOrgFile/edit',
      {
        id:this.id,
        name:this.model.title,
        parentId: this.parentId,
        type:this.type,
      },
      'POST'
    )
      .finally(() => {
        this.close()
        this.visible = false
      
        this.$emit('handleOk');
      })
  
  },
    handleParentIdChange(value){
      // console.log(value);
      if(!value){
        this.validateStatus="error"
      }else{
        this.validateStatus="success"
      }
    },
    close () {
        this.$emit('close');
        this.visible = false;
      },
    handleCancel () {
        this.close()
      }
  }
}
</script>